<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <!--<link href="css/mui.min.css" rel="stylesheet"  type="text/css"/>-->

    <style type="text/css">
.topNavigation{
    width:100%;
    height:50px;
    background:#CCCCCC;
     position:fixed;
     top: 0
    }
.content {
    width:100%;
    height: 67px;
    margin-top: 11px;
    font-size: 15px;
}
.showTotal{
	width:100%;
    height:53px;
    margin:0 auto;
    /*background:#CCCCCC;*/
    position:fixed;
    bottom:50px;
    text-align:left;
    font-size: 15px;
    background-color:whitesmoke;
    padding: 5px 10px;
    box-sizing: border-box;

}
.bottomNavigation {
    width:100%;
    height:50px;
    margin:0 auto;
    background:#CCCCCC;
    position:fixed;
    bottom:0;
    text-align:center;
    display: flex;
}
.searchinput{
	border-right-width: 0px;
	padding-left: 3px;
	width: 168px;
	height: 20px;
	font-family: arial;
	float: left;
	border-top-width: 0px;
	border-bottom-width: 0px;
	color: #636365;
	margin-left: 4px;
	font-size: 8pt;
	vertical-align: middle;
	border-left-width: 0px;
	margin-right: 3px;
}
.searchinput:focus{
    border: none;
    outline: none;
}
.searchinput::-webkit-input-placeholder {
    text-align: center;
}
.tab_search{
	width: 100%;
	height: 50px;
	border: #cccccc 1px solid;
    background-color: white;

}

.searchaction{
	width: 21px;
	float: left;
	height: 17px;
    border-left: 2px solid #d0cfcf;
}


.button1{
	width:25%;
	height: 100%;
	background: white;
    border: none;
    border-left: 1px solid #dddddd;
}
.productAdd,.productReduce{
    height: 19px;
    border-radius: 50%;
    border: none;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 19px;
}
#myNum{
    border: none;
    width: 30px;
    text-align: center;
}
</style>
    <!-- 页面加载时，遍历android传过来的 商品列表集合-->
    <script >
		function toActivity(activity){
        	productList.toActivity(activity);
        }
        <!--商品列表 返回数据-->
        function myjson(){
      	var json=productList.show();
      	//var json='[{"measurement_unit":"kg","name":"商品 0","price":"20元","state":0},{"measurement_unit":"份","name":"商品 1","price":"15元","state":0},{"measurement_unit":"kg","name":"商品 2","price":"20元","state":0}]';

	    json=eval(json);
        return json;
        }
       <!--添加购物车-->
        function addToCart( name, number, price){
          var result=productList.addToCart(name, number, price);
          //alert(result);//返回结果是否加入购物车成功
        }
      window.onload=function(){
      show();
      function show(){
      json=myjson();

		var str="";
		for(var key in json){
		    /*
					 str+="<div id='' style='border: 1px solid #888888;width: 100%;height: 85px;background-color: #EEEEEE;'>"+
								"<span id='' style='border: 0px solid;width: 30%;height: 60px;float: left;'>"+
									"<img src='food_img/hongShaoRou.jpg' width='100%'height='100%'/>"+
								"</span>"+
								"<span id=''style='border: 0px solid red;width: 69%;height: 80px; float: left;'>"+
								"<table border='0' align='center' cellpadding='0' cellspacing='0' style='width: 100%;height: 80px;text-align: center;'>"+
									"<tr><td style='width: 80px;'>"+"价格:"+"</td><td>"+json[key].goodsPrice/100+"元"+"</td></tr>"+
									"<tr><td>"+"单位:"+"</td><td>"+json[key].goodsUnit+"</td></tr>"+
									"<tr><td>"+"数量:"+"</td><td>"+"0"+"</td></tr>"+
									"<tr><td>"+"选择:"+"</td><td>"+
										"<input type='text' name='' id='' value='-' readOnly='true'style='width: 20px;background-color: yellowgreen;'/>"+
										"<input type='text' name='' id='myNum' value='"+json[key].number+"' readOnly='true'style='width: 20px;background-color: yellow;'/>"+
										"<input type='text' name='' id='' value='+' readOnly='true'style='width: 20px;background-color: yellowgreen;'/>"+
									"</td></tr>"+
								"</table>"+

								"</span>"+
								"<span id=''style='border: 0px solid blue;width: 30%;height: 21px;float: left;margin-top: -18px;text-align: center;'>"+
								    "<input type='text' id='' value='"+json[key].goodsName+"' style='width: 100%;margin-top: 0px;text-align: center;border: none;background-color: white;' disabled='disabled'/>"+
								"</span>"+
						"</div>";*/
            str+=" <div  style='border: 1px solid #d3d3d3;width: 100%;height: 110px;padding: 10px;box-sizing: border-box'>" +
                "            <span  style='border: 0px solid;width: 30%;height: 85px;float: left;'>" +
                "                <img src='food_img/hongShaoRou.jpg' width='100%' height='100%'/>" +
                "            </span>\n" +
                "            <span style='border: 0px solid red;width: 69%;height: 80px; float: left;'>" +
                "                <table border='0' align='center' cellpadding='0' cellspacing='0' style='width: 100%;height: 80px;text-align: left;margin-left: 5px'>" +
                "                    <tr><td class='goodsName' style='font-weight: bold'>"+json[key].goodsName+"</td></tr>" +
                "                    <tr><td ><span style='color: #999;font-size: .9em'>价格:</span> <span class='goodsPrice' style='color: red'>"+json[key].goodsPrice/100+"</span> <span style='color: #999;font-size: 0.8em'>元/"+json[key].goodsUnit+"</span> </td></tr>" +
                "                    <tr><td><span style='color: #999;font-size: .9em'>数量:</span> <span class='num'>0</span></td></tr>" +
                "                    <tr><td><span style='color: #999;font-size: .9em'>选择:</span></td>" +
                "                        <td style='text-align: right;padding-right: 25px;'>" +
                "                        <input class='productReduce' type='text' name=''  value='-' readOnly='true' style='width: 20px;background-color: yellowgreen;'/>" +
                "                        <input type='text' class='saleNum' name='' id='myNum' value='"+json[key].number+"' readOnly='true' style='width: 20px;'/>" +
                "                        <input class='productAdd' type='text' name=''  value='+' readOnly='true' style='width: 20px;background-color: yellowgreen;'/>" +
                "                    </td></tr>" +
                "                </table>" +
                "            </span>" +
                "        </div>";
		}
		str+="<div id='' style='width: 100%;height: 100px;'></div>";
			document.getElementById('list').innerHTML=str;
		}
      	//+-
      		  var list=document.getElementById('list');//
			  var div_s=list.getElementsByTagName('div');//拿到所有子div

			  for(var i=0;i<div_s.length-1;i++){//对每个tr操作
			   	fn1(div_s[i]);

      	      }
      }
      function  fn1(div_s){
      	var span_s=div_s.getElementsByTagName('span');
      		var name=div_s.getElementsByClassName('goodsName').innerText;//得到商品名称
      		carNum=document.getElementById('carNum').innerText;	//得到购物车里数量
      		var table=span_s[1].children[0];
      		var tr=table.getElementsByTagName('tr');
			var price=div_s.getElementsByClassName("goodsPrice").innerHTML;
			price=parseInt(price);
			//var number=tr[2].children[1].innerHTML;
			var aStrong=tr[3].children[1].getElementsByTagName('input');
			//var num=aStrong[1].value;
          var num=document.getElementById('myNum').value;
          div_s.getElementsByClassName('productReduce')[0].onclick=function(){
			   if(num>0){
				   num--;
				   carNum--;
				   document.getElementById('carNum').innerText=carNum;
                   div_s.getElementsByClassName('saleNum')[0].value=num;
				   div_s.getElementsByClassName('num').innerHTML=num;//设置数量
				   	var showTotal=document.getElementById('total').innerText;//得到要变化的总价
				   var subShowTotal=showTotal.substring(3);//截取字符串
				   var myTotal=parseInt(subShowTotal);
				   	myTotal=myTotal-price;
				   	document.getElementById('total').innerHTML='共计: '+myTotal+'元'
				   	//加入购物车；参数 本行 商品名，商品数量，商品价格，商品总价
	                addToCart(name,num,price);
				   }
			   }
          div_s.getElementsByClassName('productAdd')[0].onclick=function(){
			   num++;
			   carNum++;
			   document.getElementById('carNum').innerText=carNum;
              div_s.getElementsByClassName('saleNum')[0].value=num;
              //console.dirxml(tr[2].children[1]);
              div_s.getElementsByClassName('num').innerHTML=num;//设置数量
			   	var showTotal=document.getElementById('total').innerText;//得到要变化的总价
			   var subShowTotal=showTotal.substring(3);//截取字符串
			   var myTotal=parseInt(subShowTotal);
			   myTotal=myTotal+price;
			   	document.getElementById('total').innerHTML='共计: '+myTotal+'元'
                //加入购物车；参数 本行 商品名，商品数量，商品价格，商品总价
               addToCart(name,num,price);
			   }

      }
      //搜索框功能 --点击图片时进行搜索，显示在列表页
      function mysearch(){
	      	//购物车设置为0
	      	carNum=0;
	      	document.getElementById('carNum').innerText=carNum;
	      	//把总价设置为0
	      	document.getElementById('total').innerHTML='共计: '+0+'元';
			//创建一个新数组存储商品名称
			var arr1=[];
			for(var key in json){
				arr1.push(json[key].goodsName);
			}
	      	//在创建一个空数组 准备存储搜索出来的值
	      	var arr2=[];
	      	//获取搜索框的值searchinput
	      	var mySearchValue=document.getElementById('searchinput').value;
	      	//获取要显示的地方
	      	var list=document.getElementById('list');

	        //遍历数组1
	        for (var i = 0; i < arr1.length; i++) {
	            if(mySearchValue == "- 请输入要搜索的商品  -"){
	                arr2.push(json[i]);
	            }else{
	                if(arr1[i].indexOf(mySearchValue) > -1 ) {
	                        arr2.push(json[i]);
	                    }
	            }

	        }
	        var str="";
			for(var key in arr2){
			    /*
			         str+="<div id='' style='border: 1px solid #d3d3d3;width: 100%;height: 85px;padding: 10px'>"+
								"<span id='' style='border: 0px solid;width: 30%;height: 85px;float: left;'>"+
									"<img src='food_img/hongShaoRou.jpg' width='100%'height='100%'/>"+
								"</span>"+
								"<span id=''style='border: 0px solid red;width: 69%;height: 80px; float: left;'>"+
								"<table border='0' align='center' cellpadding='0' cellspacing='0' style='width: 100%;height: 80px;text-align: center;'>"+
									"<tr><td style='width: 80px;'>"+"价格:"+"</td><td>"+arr2[key].goodsPrice/100+"元"+"</td></tr>"+
									"<tr><td>"+"单位:"+"</td><td>"+arr2[key].goodsUnit+"</td></tr>"+
									"<tr><td>"+"数量:"+"</td><td>"+"0"+"</td></tr>"+
									"<tr><td>"+"选择:"+"</td><td>"+
										"<input type='text' name='' id='' value='-' readOnly='true'style='width: 20px;background-color: yellowgreen;'/>"+
										"<input type='text' name='' id='myNum' value='"+arr2[key].number+"' readOnly='true'style='width: 20px;background-color: yellow;'/>"+
										"<input type='text' name='' id='' value='+' readOnly='true'style='width: 20px;background-color: yellowgreen;'/>"+
									"</td></tr>"+
								"</table>"+

								"</span>"+
								"<span id=''style='border: 0px solid blue;width: 30%;height: 21px;float: left;margin-top: -18px;text-align: center;'>"+
								    "<input type='text' id='' value='"+arr2[key].goodsName+"' style='width: 100%;margin-top: 0px;text-align: center;border: none;background-color: white;' disabled='disabled'/>"+
								"</span>"+
						"</div>";
						*/
                str+=" <div  style='border: 1px solid #d3d3d3;width: 100%;height: 110px;padding: 10px;box-sizing: border-box'>" +
                    "            <span  style='border: 0px solid;width: 30%;height: 85px;float: left;'>" +
                    "                <img src='food_img/hongShaoRou.jpg' width='100%' height='100%'/>" +
                    "            </span>\n" +
                    "            <span style='border: 0px solid red;width: 69%;height: 80px; float: left;'>" +
                    "                <table border='0' align='center' cellpadding='0' cellspacing='0' style='width: 100%;height: 80px;text-align: left;margin-left: 5px'>" +
                    "                    <tr><td class='goodsName' style='font-weight: bold'>"+arr2[key].goodsName+"</td></tr>" +
                    "                    <tr><td ><span style='color: #999;font-size: .9em'>价格:</span> <span class='goodsPrice' style='color: red'>"+arr2[key].goodsPrice/100+"</span> <span style='color: #999;font-size: 0.8em'>元/"+arr2[key].goodsUnit+"</span> </td></tr>" +
                    "                    <tr><td><span style='color: #999;font-size: .9em'>数量:</span> 0</td></tr>" +
                    "                    <tr><td><span style='color: #999;font-size: .9em'>选择:</span></td>" +
                    "                        <td style='text-align: right;padding-right: 25px;'>" +
                    "                        <input class='productReduce' type='text' name=''  value='-' readOnly='true' style='width: 20px;background-color: yellowgreen;'/>" +
                    "                        <input type='text' name='' class='saleNum' id='myNum' value='"+arr2[key].number+"' readOnly='true' style='width: 20px;'/>" +
                    "                        <input class='productAdd' type='text' name=''  value='+' readOnly='true' style='width: 20px;background-color: yellowgreen;'/>" +
                    "                    </td></tr>" +
                    "                </table>" +
                    "            </span>" +
                    "        </div>";
		}
			str+="<div id='' style='width: 100%;height: 100px;'></div>";
			document.getElementById('list').innerHTML=str;
			var list=document.getElementById('list');//
			  var div_s=list.getElementsByTagName('div');//拿到所有子div

			  for(var i=0;i<div_s.length-1;i++){//对每个tr操作
			   	fn1(div_s[i]);

      	      }
	        return false;
        }
	</script>
</head>
<body style="margin: 0;">

<div  class="topNavigation">
    <div style="font-size:17px;height: 40px;text-align: center;line-height: 40px;background-color: #F7F7F7;">商品列表</div>
    <form action="#" name="search">
        <table border="0" align="center" cellpadding="0" cellspacing="0" class="tab_search">
            <tr>
                <td>
                    <input  type="text" style="width: 90%;height: 40px;font-size: 16px;" name="searchinput"  class="searchinput" id="searchinput"  placeholder="- 请输入要搜索的商品 -" size="10"/>
                </td>
                <td style="width: 20%">
                    <input type="image" style="width: 40px;height: 40px;padding: 0 24px"  class="searchaction" src="icon/sousuo.png" onclick="return mysearch()" />
                </td>
            </tr>
        </table>
    </form>
</div>
<div class="content"></div>
<div id=" " class="content">
    <div id="list" class="list" style="text-align: left;">

        <!--<div  style='border: 1px solid #d3d3d3;width: 100%;height: 110px;padding: 10px;box-sizing: border-box'>-->
            <!--<span  style='border: 0px solid;width: 30%;height: 85px;float: left;'>-->
                <!--<img src='food_img/hongShaoRou.jpg' width='100%' height='100%'/>-->
            <!--</span>-->
            <!--<span style='border: 0px solid red;width: 69%;height: 80px; float: left;'>-->
                <!--<table border='0' align='center' cellpadding='0' cellspacing='0' style='width: 100%;height: 80px;text-align: left;margin-left: 5px'>-->
                    <!--<tr><td style='font-weight: bold'>红烧龙利鱼</td></tr>-->
                    <!--<tr><td ><span style='color: #999;font-size: .9em'>价格:</span> <span style='color: red'>1</span> <span style='color: #999;font-size: 0.8em'>元/份</span> </td></tr>-->
                    <!--<tr><td><span style='color: #999;font-size: .9em'>数量:</span> 0</td></tr>-->
                    <!--<tr><td><span style='color: #999;font-size: .9em'>选择:</span></td>-->
                        <!--<td style='text-align: right;padding-right: 25px;'>-->
                        <!--<input class='productReduce' type='text' name=''  value='-' readOnly='true' style='width: 20px;background-color: yellowgreen;'/>-->
                        <!--<input type='text' name='' id='myNum' value='1' readOnly='true' style='width: 20px;'/>-->
                        <!--<input class='productAdd' type='text' name=''  value='+' readOnly='true' style='width: 20px;background-color: yellowgreen;'/>-->
                    <!--</td></tr>-->
                <!--</table>-->
            <!--</span>-->
        <!--</div>-->
    <!--</div>-->

</div>
<div class="showTotal" id="showTotal">
    <div id="" style="text-align: left;float: left;">
		<span id="xiaoguotu" >
	<input type="image" src="icon/food.png" width="40px" height="40px"/>
	<span id="carNum" style="float: right;color: blue;background-color: whitesmoke;height: 53px;line-height: 45px">
		0
	</span>

	</span>
    </div>
    <div id="" style="text-align: right;float: right;line-height: 45px">
		<span id="total" >
		   共计:0元
	</span>
    </div>
</div>

</div>
<div class="bottomNavigation">
    <button class="button1" onclick="toActivity('HomePageActivity')">首页</button>
    <button class="button1" onclick="toActivity('OrderActivity')">订单</button>
    <button class="button1" onclick="toActivity('ShoppingCartActivity')">购物车</button>
    <button class="button1" onclick="toActivity('PersonalCenterActivity')">我的</button>
</div>
</body>
</html>